<template>
    <el-dialog v-model="show" title="采购入库详情" width="35%" align-center @close="handleClose">

        <div class="mb20">
            订单状态: <span v-if="props.initList.reconciliationStatus === '0'" style="color: #DF9BF9; ">未对账</span>
            <span v-if="props.initList.reconciliationStatus === '1'" style="color: #69AFF0; ">已对账</span>
            <span v-if="props.initList.reconciliationStatus === '2'" style="color: #72C64A; ">已付款</span>
        </div>

        <el-table :data="props.detailList" style="width: 100%">
            <el-table-column prop="createTime" label="入库时间" align="center" />
            <el-table-column prop="specifications" label="规格名称" align="center" />
            <el-table-column prop="number" label="入库数量" align="center" />
            <el-table-column prop="unit" label="单位" align="center">
                <template #default="scope">
                    {{ getUnitLabel(scope.row.unit) }}
                </template>
            </el-table-column>
            <el-table-column prop="createByName" label="入库人" align="center" />
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
/** 查看详情 */
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'detailList', 'unitEnumeration']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

// 辅助函数获取单位标签
const getUnitLabel = (unitValue: string): string => {
    const unit = props.unitEnumeration?.find((item: any) => item.value == unitValue);
    return unit?.label || '';
};


const handleSubmit = async () => {
    proxy?.$modal.msgSuccess('操作成功');
    emits('submit', true);

    handleClose();
};


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>